<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 500px; height: 320px;" />
      </el-col>
      <el-col :span="12">
        <div id="pie_example" style="width: 500px; height: 320px;" />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="line_example" style="width:500px;height:320px;" />
      </el-col>
      <el-col :span="12">
        <div id="pie_example2" style="width:500px;height:320px;" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  mounted() {
    this.myEcharts()
    this.pieEcharts()
    this.lineEcharts()
    this.barEcharts2()
  },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '条形图示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    pieEcharts() {
      this.$echarts.init(document.getElementById('pie_example'))
        .setOption({
          title: {
            text: '扇形图示例'
          },
          legend: {
            data: ['A', 'B', 'C']
          },
          series: {
            type: 'pie',
            data: [
              { name: 'A', value: 1212 },
              { name: 'B', value: 2323 },
              { name: 'C', value: 1919 }
            ]
          }
        })
    },
    lineEcharts() {
      this.$echarts.init(document.getElementById('line_example'))
        .setOption({
          title: {
            text: '折线图图示例'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        })
    },
    barEcharts2() {
      this.$echarts.init(document.getElementById('pie_example2'))
        .setOption({
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2015', '2016', '2017'],
              ['Matcha Latte', 43.3, 85.8, 93.7],
              ['Milk Tea', 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 86.4, 65.2, 82.5],
              ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            { type: 'bar' },
            { type: 'bar' },
            { type: 'bar' }
          ]
        })
    }
  }
}
</script>

<style scoped>

</style>
